<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Breathe Button - iinterest</title>
<style type="text/css">
/*resize*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,menu{ margin:0; padding:0;}
body{ font-size:12px; -webkit-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif;}
img{ border:none;}
ol,ul{ list-style:none;}
em{ font-style:normal;}
a{ text-decoration:none;}
.clearfix{ #zoom:1;}
.clearfix:after{ content:' '; display:block; height:0; clear:both; color:#fff;}
body{ background:#000;}
.breathe-box{ position:relative; width:640px; height:400px; margin:160px auto; line-height:40px; 
	border:2px solid #2b92d4; border-radius:15px; color:#fff; font-size:20px; text-align:center; 
	cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden; 
	/*background-image: -webkit-gradient(linear, left top, left bottom, from(#6cc3fe), to(#21a1d0));*/
	-webkit-animation-timing-function: ease-in-out;    /*动画时间曲线*/
	-webkit-animation-name: breathe;                  /*动画名称，与@keyframes搭配使用*/
	-webkit-animation-duration: 1500ms;              /*动画持续时间*/
	-webkit-animation-iteration-count: infinite;    /*动画要重复次数*/
	-webkit-animation-direction: alternate;         /*动画执行方向，alternate 表示反复*/
}
@-webkit-keyframes breathe {
    0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
    100% { opacity: 1; border:2px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
}
</style>
</head>
<body>
<div class="breathe-box"></div>
</body>
</html>
